<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>vue-numeric demo</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.0/css/bulma.min.css">
    <style>
      [v-cloak] {
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="app" v-cloak>
      <section class="hero is-primary is-bold">
        <div class="hero-body">
          <div class="container">
            <h1 class="title">
              Vue Numeric
            </h1>
            <h2 class="subtitle">
              Input field component to display currency value based on Vue.js
            </h2>
          </div>
        </div>
      </section>

      <div class="section container">
        <div class="columns is-multiline is-mobile">
          <div class="column is-12 has-text-centered">
            <p class="control">
              <label class="label"> Value: {{ money }} </label>
              <vue-numeric
                class="input is-large"
                v-model="money"
                :min="minValue"
                :max="maxValue"
                :currency="currency"
                :separator="separator"
                :precision="decimals"
                :read-only="readOnly"
                read-only-class="test"
              >
              </vue-numeric>
            </p>
          </div>
        </div>

        <hr>
        <h1 class="title is-4">
          Config:
        </h1>

        <div class="columns is-multiline is-mobile">
          <div class="column is-12">
            <p class="control">
              <label class="label"> Currency symbol </label>
              <input class="input" v-model="currency">
            </p>
          </div>
          <div class="column is-12">
            <p class="control">
              <label class="label"> Minimum Value </label>
              <input class="input" type="number" v-model.number="minValue">
            </p>
          </div>
          <div class="column is-12">
            <p class="control">
              <label class="label"> Maximum Value </label>
              <input class="input" type="number" v-model.number="maxValue">
            </p>
          </div>
          <div class="column is-12">
            <p class="control">
              <label class="label"> Decimals digits </label>
              <input class="input" type="number" v-model.number="decimals">
            </p>
          </div>
          <div class="column is-12">
            <label class="label"> Separator </label>
            <p class="control">
              <label class="radio">
                <input type="radio" value="," v-model="separator">
                use ',' as separator
              </label>
              <label class="radio">
                <input type="radio" value="." v-model="separator">
                use '.' as separator
              </label>
              <label class="radio">
                <input type="radio" value="space" v-model="separator">
                use space as separator
              </label>
            </p>
          </div>
          <div class="column is-12">
            <p class="control">
              <input type="checkbox" v-model="readOnly">
              Read Only
            </p>
          </div>
        </div>
      </div>

      <br>

      <footer class="footer">
        <div class="container">
          <div class="content has-text-centered">
            <p>
              <strong>Vue Numeric</strong> by <a href="http://kevinongko.com">Kevin Ongko</a>. The source code is licensed
              <a href="http://opensource.org/licenses/mit-license.php">MIT</a>
            </p>
            <p>
              <a href="https://www.npmjs.com/package/vue-numeric" target="_blank">
                <img src="https://img.shields.io/npm/v/vue-numeric.svg">
                <img src="https://img.shields.io/npm/dt/vue-numeric.svg">
                <img src="https://img.shields.io/npm/dm/vue-numeric.svg">
                <img src="https://img.shields.io/npm/l/vue-numeric.svg">
              </a>
            </p>
            <p>
              <a href="https://github.com/kevinongko/vue-numeric" target="_blank">
                <img src="https://img.shields.io/github/stars/kevinongko/vue-numeric.svg?style=social&label=Star">
                <img src="https://img.shields.io/github/forks/kevinongko/vue-numeric.svg?style=social&label=Fork">
              </a>
            </p>
          </div>
        </div>
      </footer>
    </div>

    <script src="https://unpkg.com/accounting-js"></script>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/vue-numeric"></script>

    <script>
      Vue.use(VueNumeric.default)

      new Vue({
        el: '#app',

        data:  {
          money: 1000,
          minValue: 0,
          maxValue: 999999,
          currency: '$',
          decimals: 2,
          separator: ',',
          readOnly: false
        }
      })
    </script>
  </body>
</html>
